Godot: UI Size and Anchor
関連
まず、単一のデバイス・同じ解像度の端末でプレイされる場合は、あまり気にしなくても良い
https://gyazo.com/61e6d54a0664dd6d1596aa22d54ed224
Control ノードのマージンプロパティが重要になる
各Control には、left、right、bottom、top の4つのマージンがあり、これらはコントロールのそれぞれのエッジに対応する
デフォルトではすべてのマージンは、親コントロールの左上隅または(親コントロールがない場合)ビューポートからの相対距離をピクセル単位で表す
https://gyazo.com/818b9d1f8562d07fc57d873a31260ceb
Anchor の設定は、0.0 ~ 1.0 で設定する。全て0.5 にすると中央部分がアンカーになる
各マージンは、アンカーからの相対距離になる
上の画像では、アンカーが親Controlの左上(0,0,0,0)で、そこから各マージンの pixel 分だけ距離を計算した長方形が UI Control のサイズになる
https://gyazo.com/83e16b1dd075367bf478972be4623870
上の画像では、アンカーが右上(1, 0, 1, 0)となっている
アンカーの左側に置きたい場合は、マイナス値でマージンを設定する
アンカーの上側に置きたい場合も、top/bottom のマージンをマイナス値にする
https://gyazo.com/642ddf4b42abcbba279a4d7860ee5505
上の画像では、水平アンカーと垂直アンカーの数値をそれぞれ異なる値にしている
Left/Right = (0, 1)
Top/Bottom = (0, 1)
この場合、親コントロールのサイズが変更されるとこのコントロールのサイズも同様に変更される
親に追従して拡大縮小させたい UI Control に設定する
親Control の中心に設置したい場合、各アンカーを 0.5 に設定し、マージンは寸法の半分の値に設定する。
TextureRect を親Control の中心に設置する場合のコード例
code:gd
var rect = TextureRect.new()
rect.texture = load("res://icon.png")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.offset_left = -texture_size.x / 2
rect.offset_right = texture_size.x / 2
rect.offset_top = -texture_size.y / 2
rect.offset_bottom = texture_size.y / 2
add_child(rect)
これらのアンカー、マージン設定の Presets が用意されている
https://gyazo.com/a9e168b7429fab8e55d3a9fec479cf86